<template>
    <div>
        <h3>采购入库</h3>
        <el-dropdown>
         <span class="el-dropdown-link">
                供应商<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-input v-model="providerId" placeholder="providerId" @blur="changeProviderId(providerId)"></el-input>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <span>负责人: </span> <span>{{responsible}}</span><br>

        <span>采购物品：</span>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="商品名称"
                    prop="goodsName">
            </el-table-column>
            <el-table-column
                    label="厂家"
                    prop="factory">
            </el-table-column>
            <el-table-column
                    label="建议采购价"
                    prop="buyPrice">
            </el-table-column>
            <el-table-column
                    label="建议销售价"
                    prop="sellPrice">
            </el-table-column>
            <el-table-column
                    label="采购数量"
                    prop="num">
            </el-table-column>
            <!--            <template>-->
            <!--                <el-input-number v-model="num" @change="handleChange"-->
            <!--                                 :min="1" :max="10" label="采购数量"></el-input-number>-->
            <!--            </template>-->
            <el-table-column
                    align="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleDelete(scope.row.bsId)">移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="primary" @click="addProduct" style="margin: 20px;">添加</el-button>
        <el-button type="primary" @click="warehousing" style="margin: 20px;">入库</el-button>

    </div>
</template>

<script>
    export default {
        name: "PurchaseView",
        data() {
            return {
                bsId:'',
                providerId: '',
                responsible: '胡铁花',
                range: '',
                customerName: '',
                tableData: [],
                search: '',
                num: 1,
            }
        },
        mounted() {
            this.init(1)
        },
        methods: {

            init(providerId) {

                this.providerId = providerId
                let url = "api/buy/showStockIn?providerId=" + providerId
                this.$axios.get(url).then(r => {
                    console.log(r.data)
                    this.tableData = r.data
                })
            },
            changeProviderId(providerId) {
                this.init(providerId)
            },

            handleDelete(id) {

                this.$axios.get("api/buy/delNumber?buyStockId=" + id).then(r => {
                    console.log(r.data)
                    if (r.data == true) {
                        this.init(1);
                    }
                })

            },
            addProduct() {

                this.$router.push("ShowAdd2")
            },
            warehousing() {
                let url = "api/buy/stockIn?providerId="+this.providerId
                this.$axios.get(url).then(r =>{
                    if (r.data == true){
                        alert("入库成功")
                        this.init(1)
                    }
                    else {
                        alert("入库失败")
                    }
                })
            },
            handleChange(value) {

                console.log(value);
            },
        },

    }
</script>

<style scoped>

    .el-dropdown-link {
        margin-right: 100px;
    }

</style>